import React from "react"
import TryUseLatest from "./components/try-useLatest/TryUseLatest.tsx"
import TryUseMount from "./components/try-useMount/TryUseMount.tsx"
import TryUseUnmount from "./components/try-useUnmount/TryUseUnmount.tsx"
import TryUseUnmountRef from "./components/try-useUnmountedRef/TryUseUnmountedRef.tsx"
import TryUseSafeState from "./components/try-useSafeState/TryUseSafeState.tsx"
import TryUseUpdate from "./components/try-useUpdate/TryUseUpdate.tsx"
import TryUseCreation from "./components/try-useCreation/TryUseCreation.tsx"
import TryUseReactive from "./components/try-useReactive/TryUseReactive.tsx"
import CompareUseRefAndUseState from "./components/compare-ref-state/CompareUseRefAndUseState.tsx"
import TryRefInterval from "./components/ref-interval/TryRefInterval.tsx"
import GetDomByUseRef from "./components/base-ref-dom/GetDomByUseRef.tsx"
import CompForwardRef from "./components/comp-forwardRef/CompForwardRef.tsx"
import TryWaterfall from "./components/waterfall/TryWaterfall.tsx"
import TestUseState from "./components/test-useState/TestUseState.tsx"

function App() {
  return (
    <div className='App'>
      {/* Test useState */}
      {/* <TestUseState /> */}

      {/* useRef 获取 DOM  */}
      {/* <GetDomByUseRef /> */}

      {/* 比较 useRef 和 useState */}
      {/* <CompareUseRefAndUseState /> */}

      {/* useRef 定时器用例 */}
      {/* <TryRefInterval /> */}

      {/* 获取子组件 ref */}
      {/* <CompForwardRef /> */}

      {/* 永远拿到最新值 */}
      {/* <TryUseLatest /> */}

      {/* 初始化时执行 */}
      {/* <TryUseMount /> */}

      {/* 组件卸载时执行 */}
      {/* <TryUseUnmount /> */}

      {/* 获取组件是否卸载的状态 */}
      <TryUseUnmountRef />

      {/* 安全管理状态 */}
      {/* <TryUseSafeState /> */}

      {/* 强制组件重新渲染 */}
      {/* <TryUseUpdate /> */}

      {/* 强化 useMemo */}
      {/* <TryUseCreation /> */}

      {/* 响应式的 useState */}
      {/* <TryUseReactive /> */}

      {/*  */}
      {/* <TryWaterfall /> */}
    </div>
  )
}

export default App
